<template>

  <div class="allBox">
    <!-- 空白盒子 -->
    <div class="emptyBox" v-if="empty">
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="你暂时没有相关订单"
      />
    </div>
    <!-- 卡片区域 -->
    <van-card :thumb="item.thumb_path" :title="item.title" v-for="(item) in list" :key="item.id">
      <template #bottom>
        <span>共{{item.cou}}件商品</span>
        <span>实付金额:￥{{item.sell_price}}</span>
        <hr />
      </template>
      <template #footer>
        <van-button size="mini">看相似</van-button>
        <van-button size="mini" class="buyAgain">再次购买</van-button>
      </template>
    </van-card>
    <common-footer></common-footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      empty: false
    }
  },
  mounted () {
    this.getAllData()
  },
  methods: {
    async getAllData () {
      // 使用mock
      // const { data: res } = await this.$http.get("/order/all");
      // 读取本地购物车数据 拿到所有id
      const idAry = []
      const carAry = JSON.parse(window.localStorage.getItem('car'))
      // 如果本地无数据 那么就显示空白盒子
      if (!carAry) {
        this.empty = true
        return
      }
      // 本地有数据
      carAry.map((t) => idAry.push(t.id))
      // 拆分id数组 以逗号隔开
      const idString = idAry.join(',')
      // 发送请求购物车数据
      const { data: res } = await this.$http.get(
        `/api/goods/getshopcarlist/${idString}`
      )
      this.list = res.message
    }
  }
}
</script>

<style lang="less" scoped>
.van-card {
  background-color: #fff;
  padding: 8px;
  margin: 8px 16px;
  border-radius: 5px;
  box-shadow: 1px 4px 6px 1px #ccc;
}
.van-button {
  border-radius: 4px;
}
.buyAgain {
  border-color: red;
  color: red;
}
</style>
